<template>
    <div>
        <MainBox one="权限管理" two="权限列表">
                <el-table :data="rightList" style="width:100%" border stripe>
                    <el-table-column type="index"></el-table-column>
                    <el-table-column label="权限名称"  prop="authName"></el-table-column>
                    <el-table-column label="路径" prop="path"></el-table-column>
                    <el-table-column label="等级" prop="level">
                       <template slot-scope="scope"> 
                           <!-- 使用插槽   -->
                            <el-tag v-if="scope.row.level==0">一级  </el-tag>
                            <el-tag v-else-if="scope.row.level==1" type="success" >二级  </el-tag>
                            <el-tag v-else type="warning">三级</el-tag>
                       </template>
                    </el-table-column>
                </el-table>
        </MainBox>
    </div>
</template>
<script>
//  不需要导入，因为全局已经注册
//  import MainBox from '../pubom/MainBox.vue' 
export default {
    data(){
        return {
            rightList :[]
        }
    },
    // components:{
    //     MainBox
    // },
    created(){
        this.getRightList()
    },
    methods: {
       async getRightList(){
           const {data:res}=await this.$http.get('rights/list')
           if(res.meta.status!==200) return this.$message.error('查询失败')
           this.rightList =res.data;
        //    console.log(this.rightList);
           
       } 
    },

}
</script>
<style lang="less" scoped>

</style>